<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ color: '#ffffff' }">
    <view :class="[`${prefixCls}-search-page-container`]" :style="{ height: `calc(100vh - ${$Platform.navbar - 10}px)` }">
      <uv-sticky offsetTop="0" :customNavHeight="0">
        <view class="input-box">
          <uv-input prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" placeholder="公司名称" shape="circle" v-model="text" @input.trim="bindKeyInput"></uv-input>
          <uv-button type="plain">搜索</uv-button>
        </view>
      </uv-sticky>
      <view class="input-list" v-if="text">
        <template v-if="searchList.length != 0">
          <view v-for="(item, index) in searchList" :key="index" class="input-item" @click="handleSelect(item)">
            <view class="detail">
              <uv-icon name="map"></uv-icon>
              <view class="desc">
                <span>{{ item.leftText }}</span>
                <span class="primary">{{ item.centerText }}</span>
                <span>{{ item.rightText }}</span>
              </view>
            </view>
            <view class="address">{{ item.suggestion_format_address }}</view>
          </view>
        </template>
        <template v-else>
          <cu-empty mode="data" text="没有我的公司"> </cu-empty>
        </template>
      </view>
    </view>
  </cu-layout>
</template>

<script>
import { companyInfo } from './api'

import { setStorageCache } from '@/common/cache'
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'searchPage',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      text: '',
      history: [],
      hotList: [],
      searchList: [],
      start: 0,
      total: 0,
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['cityConfig', 'locationInfo']),
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {},
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {
    if (this.total > this.searchList.length) {
      this.start += 10
      this.bindKeyInput()
    }
  },

  created() {},
  mounted() {},
  destroyed() {
    removeStorageCache('reserved')
  },
  methods: {
    ...mapActions([]),
    bindKeyInput(e) {
      if (e) {
        this.start = 0
        this.searchList = []
      }
      const text = e || this.text
      if (!text) return
      uni.$uv.debounce(async () => {
        const { data } = await companyInfo({ is_more: 0, key_word: text, start: this.start, length: 10 })
        this.total = data.recordsTotal
        const list = data.data.map((v) => {
          const splitText = v.company_name.split(text)
          v.leftText = splitText[0]
          v.centerText = text
          v.rightText = splitText[1]
          return v
        })
        this.searchList = [...this.searchList, ...list]
      }, 300)
    },
    // 搜索
    async handleSelect({ company_name }) {
      setStorageCache('reservedCompany', company_name)
      uni.navigateBack()
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('search-page-container')} {
  width: 100%;
  background: white;
  box-sizing: border-box;
  padding: 0 30rpx;
  overflow-y: scroll;
  .input-box {
    background: white;
    display: flex;
    padding: 30rpx 0;
    ::v-deep .uv-input {
      border-radius: 10rpx !important;
    }
    // .uv-input {
    //   width: 80%;
    //   border-radius: 20rpx;
    // }
    // .uv-button {
    //   width: 20%;
    // }
  }
  .input-list {
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    .input-item {
      font-size: 28rpx;
      font-weight: bold;
      color: #222;
      width: 646rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 32rpx;
      display: flex;
      flex-wrap: wrap;
      .detail {
        display: flex;
        .desc {
          margin-left: 10rpx;
        }
        .primary {
          color: $uv-primary;
        }
      }
      .address {
        flex-basis: 100%;
        margin-left: 40rpx;
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  .history-box,
  .hot-box {
    margin-top: 50rpx;
    .history-title,
    .hot-title {
      font-weight: bold;
      display: flex;
      justify-content: space-between;
    }
  }
  .history-list,
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30rpx;
    .history-item,
    .hot-item {
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      background: #f5f5f5;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 10rpx;
    }
  }
}
</style>
